<template>
	<div>
		<el-backtop :bottom="100"></el-backtop>
		<!--   -->
		<div class="myCarousel" v-bind:style="{backgroundImage:'url(' + bg4 + ')',
        backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%'}">
			<el-carousel indicator-position="outside" :interval="4000" type="card" height="250px">
				<el-carousel-item v-for="item in imgwrap" :key="item.url">
					<img :src="item.url" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- <el-divider content-position="center"><span style="font-size: 18px; color: #4f89cb">功能导航</span></el-divider> -->
		<!-- 		<el-tabs v-model="activeName">
			<el-tab-pane label="导航" name="first"> -->

		<!--   v-bind:style="{backgroundImage:'url(' + bg2 + ')',
        backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%'}" -->
		<div class="myCard">
			<div class="h-i-wrapper">
				<div class="h-i-container">
					<a style="text-decoration: none;" href="/diseaseGraph" class="h-i-item">
						<div class="h-i-title">疾病图谱</div>
						<div class="h-i-info">总计44,111个实体得知识图谱展示</div>
					</a><a href="/helpcure" class="h-i-item">
						<div class="h-i-title">辅助诊断</div>
						<div class="h-i-info">向机器人咨询疾病相关问题</div>
					</a><a href="/clouddisease" class="h-i-item">
						<div class="h-i-title">疾病词云生成</div>
						<div class="h-i-info">查看已有疾病数据的词云展示</div>
					</a><a href="/cloudupload" class="h-i-item">
						<div class="h-i-title">自定义词云上传</div>
						<div class="h-i-info">上传文件，自定义生成词云图</div>
					</a>
				</div>
			</div>
			<!-- <el-card style="width: 1280px;" shadow="hover">
			
			</el-card> -->
		</div>
		<!-- </el-tab-pane>
		</el-tabs> -->

		<el-divider content-position="center"><span style="font-size: 18px; color: cadetblue">新闻资讯</span></el-divider>

		<div class="myNews">
			<el-card style="width: 1280px;" shadow="hover">
				<div class="home_public_content interested" style="padding: 20px 0;">
					<div class="section interesnews">
						<div class="section clearfix">
							<ul id="workDynamics1">
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=428a8a8c-fbd8-4c9f-9b85-18d18d305f96"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心参加第二届“专病数据库、样本库、知识库”临床三库建设与生物信息技术应用研讨会">国家人口健康科学数据中心参加第二届“专病数据库、样本库、知识库”临床三库建设与生物信息技术应用研讨会</a><span>2023-04-05</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=6bc82425-615c-4ff7-bb19-f723e3384faf"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心赴上海与复旦大学人类表型组研究院交流">国家人口健康科学数据中心赴上海与复旦大学人类表型组研究院交流</a><span>2023-04-05</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=ff8d3520-1f04-4205-a366-1d970da277b5"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心为国家老年疾病临床医学研究中心进行科学数据汇交专题讲座">国家人口健康科学数据中心为国家老年疾病临床医学研究中心进行科学数据汇交专题讲座</a><span>2023-04-05</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=90739b4d-fba3-4b40-8abb-3f944d187c7a"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心组织学习《涉及人的生命科学和医学研究伦理审查办法》">国家人口健康科学数据中心组织学习《涉及人的生命科学和医学研究伦理审查办法》</a><span>2023-03-09</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=bc073a2b-1407-4c29-9f32-13e2646f8200"
										target="_blank" class="width350nocolor overtext"
										title="2022年人口健康“共享杯”大学生科技资源共享服务创新大赛获奖作品公示">2022年人口健康“共享杯”大学生科技资源共享服务创新大赛获奖作品公示</a><span>2023-03-07</span>
								</li>
								<li><a href="javascript:;" onclick="" class="width350nocolor overtext"
										title="关于印发涉及人的生命科学和医学研究伦理审查办法的通知">关于印发涉及人的生命科学和医学研究伦理审查办法的通知</a><span>2023-02-28</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=f8cc749c-717b-4bf3-b185-ba53ec73c4da"
										target="_blank" class="width350nocolor overtext"
										title="加强科学数据管理，践行科研诚信规范">加强科学数据管理，践行科研诚信规范</a><span>2023-02-08</span></li>
							</ul>
							<ul id="workDynamics2">
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=5f4e74fa-8ae0-4dd6-8013-c83709beb922"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心发布2022年度大事记">国家人口健康科学数据中心发布2022年度大事记</a><span>2023-02-03</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=bf44a619-3be1-48cb-ad0c-53491230aaa7"
										target="_blank" class="width350nocolor overtext"
										title="【恭贺兔年新春】国家人口健康科学数据中心祝您兔年大吉，大展宏图！">【恭贺兔年新春】国家人口健康科学数据中心祝您兔年大吉，大展宏图！</a><span>2023-01-20</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=28b80ea1-bbe3-490e-95fb-9034624b3b86"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心（药学）参与协办的《2022药品数智发展大会》顺利召开">国家人口健康科学数据中心（药学）参与协办的《2022药品数智发展大会》顺利召开</a><span>2023-01-10</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=141ec4f3-196f-493e-bae7-a893f391a6f8"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心组织召开《生物医学科学数据分级分类研讨会》">国家人口健康科学数据中心组织召开《生物医学科学数据分级分类研讨会》</a><span>2023-01-09</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=09e5da77-18a5-41df-830c-daa1839c9628"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心组织召开《项目科学数据汇交工作研讨会》">国家人口健康科学数据中心组织召开《项目科学数据汇交工作研讨会》</a><span>2023-01-09</span>
								</li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=117b5978-ba45-4bed-b14f-cc72b6919c9b"
										target="_blank" class="width350nocolor overtext"
										title="【会议预告】2022药品数智发展大会">【会议预告】2022药品数智发展大会</a><span>2022-12-15</span></li>
								<li><a href="https://www.ncmi.cn/workDynamics/findWorkDynamics.do?id=29791929-a770-4fb0-918c-ab25662050d0"
										target="_blank" class="width350nocolor overtext"
										title="国家人口健康科学数据中心参加首届医疗隐私计算大会圆桌论坛">国家人口健康科学数据中心参加首届医疗隐私计算大会圆桌论坛</a><span>2022-12-13</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</el-card>
		</div>


		<el-divider content-position="center"><span style="font-size: 18px; color: cadetblue">本站数据</span></el-divider>
		<!--  v-bind:style="{backgroundImage:'url(' + bg3 + ')',
        backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%'}" -->
		<div class="myDataGraph">
			<el-container>
				<el-aside width="50%">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="实体数据" name="first">
							<div class="myGraph1" id="myPie1" style="width: 600px;height: 600px;"></div>
							<span>总数据量：44111个实体</span>
						</el-tab-pane>
						<el-tab-pane label="关系数据" name="second">
							<div class="myGraph1" id="myPie2" style="width: 600px;height: 600px;"></div>
							<span>总关系量：294149条关系</span>
						</el-tab-pane>
					</el-tabs>
				</el-aside>
				<el-main>
					<el-tabs v-model="activeName2" @tab-click="handleClick2">
						<el-tab-pane label="问句类型" name="first">
							<div id="treeChart" style="width: 800px;height:600px;"></div>
						</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-container>
		</div>
		<el-divider content-position="center"><span style="font-size: 18px; color: cadetblue">友情链接</span></el-divider>
		<div class="friendLink">
			<div class="bottom-ship">
				<h3>友情链接</h3>
				<div class="title2">
				</div>
				<ul>
					<li><a href="http://www.nhc.gov.cn/" target="_blank">中华人民共和国国家卫生健康委员会</a></li>
					<li><a href="http://www.nhc.gov.cn/" target="_blank">国家卫生计生委</a></li>
					<li><a href="http://www.nih.gov/" target="_blank">NIH</a></li>
					<li><a href="http://wonder.cdc.gov" target="_blank">CDC WONDER</a></li>
					<li><a href="http://www.healthyhk.gov.hk/phisweb/gb" target="_blank">香港健康宝库</a></li>
					<li><a href="http://www.dsec.gov.mo/Statistic.aspx?lang=zh-CN" target="_blank">澳门统计局</a></li>
					<li><a href="http://www.dxy.com" target="_blank">丁香园</a></li>
					<li><a href="http://www.epiman.cn" target="_blank">公卫人</a></li>
					<li><a href="http://www.zybsos.org" target="_blank">职业病防治公益网</a></li>
					<li><a href="http://www.who.int/research/en" target="_blank">世界卫生组织</a></li>
					<li><a href="http://www.chinatb.org" target="_blank">中国结核网</a></li>
					<li><a href="http://www.chinacdc.cn" target="_blank">中国疾病预防控制中心</a></li>
					<li><a href="http://www.pumc.edu.cn/" target="_blank">中国医学科学院</a></li>
					<li><a href="http://www.jdzx.net.cn/" target="_blank">卫生监督中心</a></li>
					<li><a href="http://www.nhc.gov.cn/mohwsbwstjxxzx" target="_blank">统计信息中心</a></li>
					<li><a href="http://www.nhei.cn/" target="_blank">卫生发展中心</a></li>
					<li><a href="http://www.dcmst.org.cn/" target="_blank">医药卫生科技发展中心</a></li>
					<li><a href="http://www.cpma.org.cn/" target="_blank">中华预防医学会</a></li>
				</ul>
			</div>
		</div>
		<el-divider content-position="center"><span style="font-size: 18px; color: black"></span></el-divider>
		<!--  v-bind:style="{backgroundImage:'url(' + bg4 + ')',
        backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%'}" -->
		<div class="aboutUs">
			<div>

			</div>
		</div>
	</div>

</template>

<script>
	var echarts = require('echarts');
	export default {
		created() {

		},
		mounted() {
			document.title = "欢迎页面";
			this.initDataGraph1();
			this.initDataGraph2();
			this.showChart();
		},
		data() {
			return {
				activeName: 'first',
				activeName2: "first",
				imgwrap: [{
						url: require('../../assets/pic/welcome1.jpg')
					},
					{
						url: require('../../assets/pic/welcome2.jpg')
					},
					{
						url: require('../../assets/pic/welcome3.jpg')
					},
					{
						url: require('../../assets/pic/welcome4.jpg')
					}

				],
				bg1: require('../../assets/pic/top_bg1.jpg'),
				bg2: require('../../assets/pic/home_bg2.jpg'),
				bg3: require('../../assets/pic/home_bg1.jpg'),
				bg4: require('../../assets/pic/home_bg1plus.jpg'),
				bg5: require('../../assets/pic/bg_dingxiang_1.png'),
				myChart1: '',
				option1: '',
				data1: [{
						value: 8807,
						name: '疾病实体'
					},
					{
						value: 5998,
						name: '症状实体'
					},
					{
						value: 4870,
						name: '食物实体'
					},
					{
						value: 3828,
						name: '药品实体'
					},
					{
						value: 3353,
						name: '检查项目'
					},
					{
						value: 54,
						name: '科室实体'
					}
				],
				myChart2: '',
				option2: '',
				data2: [{
						value: 59467,
						name: '疾病推荐药品'
					},
					{
						value: 40221,
						name: '疾病推荐食物'
					},
					{
						value: 39422,
						name: '疾病检查项目'
					},
					{
						value: 22247,
						name: '疾病忌吃食物'
					},
					{
						value: 22238,
						name: '疾病宜吃食物'
					},
					{
						value: 14648,
						name: '疾病常用药物'
					},
					{
						value: 12029,
						name: '疾病并发症状'
					},
					{
						value: 8844,
						name: '属于关系'
					},
					{
						value: 5998,
						name: '疾病表现症状'
					}
				],
				dataTree: [{
					name: '问句类型',
					children: [{
							name: '疾病本身的问题',
							children: [{
									name: '疾病的描述',
									value: '苯中毒是啥病啊？'
								},
								{
									name: '疾病的病因',
									value: '为什么有的人会失眠？'
								},
								{
									name: '预防措施',
									value: '怎样才能预防肾虚？'
								},
								{
									name: '治疗周期',
									value: '感冒要多久才能好？'
								},
								{
									name: '治疗方式',
									value: '高血压要怎么治？'
								},
								{
									name: '治愈概率',
									value: '白血病能治好吗？'
								},
								{
									name: '易感人群',
									value: '什么人容易得高血压？'
								}
							]
						},
						{
							name: '疾病相关的问题',
							children: [{
									name: '疾病症状',
									value: '苯中毒有什么症状？'
								},
								{
									name: '疾病并发症',
									value: '失眠有哪些并发症？'
								},
								{
									name: '忌吃食物',
									value: '苯中毒得人不能吃什么？'
								},
								{
									name: '宜吃食物',
									value: '腹痛建议吃点什么食物？'
								},
								{
									name: '服用药品',
									value: '肝病要吃啥药？'
								},
								{
									name: '检查项目',
									value: '肾虚怎么才能查出来？'
								}
							]
						},
						{
							name: '其他关系的问题',
							children: [{
									name: '症状推测疾病',
									value: '最近老流鼻涕是为什么？'
								},
								{
									name: '忌吃某食物的病',
									value: '哪些人最好不好吃鸡蛋？'
								},
								{
									name: '能查出什么病',
									value: '全血细胞计数能查出啥来？'
								},
								{
									name: '宜吃某食物的病',
									value: '鸡肉有什么好处？'
								},
								{
									name: '药品能缓解的病',
									value: '板蓝根颗粒能治啥病？'
								}
							]
						}
					]
				}]
			}
		},
		methods: {
			handleClick(tab) {
				const _this = this;
				_this.activeName = tab.name;
			},
			handleClick2(tab) {
				const _this = this;
				_this.activeName2 = tab.name;
			},
			initDataGraph1() {
				const _this = this;
				// 绘制图表
				_this.option1 = {
					title: {
						text: "实体数据集"
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: '实体数量',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: _this.data1
					}]
				};
				const graphShow1 = document.getElementById('myPie1');
				_this.myChart1 = echarts.init(graphShow1, 'light');
				_this.myChart1.setOption(_this.option1);
			},
			initDataGraph2() { //关系图
				const _this = this;
				// 绘制图表
				_this.option2 = {
					title: {
						text: "关系数据集",
						left: "left"
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: '关系数量',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: _this.data2
					}]
				};
				const graphShow2 = document.getElementById('myPie2');
				_this.myChart2 = echarts.init(graphShow2, 'light');
				_this.myChart2.setOption(_this.option2);
			},
			showChart() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('treeChart'));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '问句类型'
					},
					tooltip: {
						trigger: 'item',
						triggerOn: 'mousemove',
						formatter: function(params) {
							var tip = ''
							if (params != null) {
								if (params.data.value != null) {
									let Name = '例：'
									tip += Name + params.data.value + '<br/>'
								}
							}
							return tip
						}
					},
					series: [{
						type: 'tree',
						data: this.dataTree,
						top: '4%',
						left: '14%',
						bottom: '4%',
						right: '20%',
						symbolSize: 15,
						label: {
							position: 'left',
							verticalAlign: 'middle',
							align: 'right',
							fontSize: 18
						},
						leaves: {
							label: {
								position: 'right',
								verticalAlign: 'middle',
								align: 'left'
							}
						},
						expandAndCollapse: true,
						animationDuration: 550,
						animationDurationUpdate: 750
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		}
	}
</script>

<style>
	.myCarousel {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 350px;
	}


	/* .myCard {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		height: 140px;
	} */
	.h-i-wrapper {
		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05);
	}

	.h-i-container {
		display: flex;
		width: 1180px;
		height: 114px;
		margin: 0 auto;
		justify-content: space-between;
	}

	.h-i-item {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.h-i-title {
	    margin-bottom: 4px;
	    line-height: 28px;
	    font-size: 20px;
	    color: #000;
	}
	.h-i-info {
	    line-height: 22px;
	    font-size: 14px;
	    color: #666;
	}

	.myDataGraph {
		padding-left: 60px;
		padding-right: 60px;
	}

	.myPane {
		width: 400px;
		display: flex;
		flex-direction: column;
		height: 400px;
		justify-content: center;
	}

	.el-aside {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.myQuestion {
		background-color: #000000;
		height: 500px;
		width: 600px;
	}


	.image {
		width: 60%;
	}

	.el-tabs__nav-scroll {
		width: 50%;
		margin: 0 auto
	}

	.el-card__body {
		padding: 0px;
		width: 200px;
		background-color: #ffffff;
	}

	.el-carousel {
		position: relative;
		width: 1200px;
		/* 		border: 4px solid #f8f9fa;
		border-radius: 10px; */
	}

	.el-carousel__item img {
		/* color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0; */
		width: 100%;
		height: 100%;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-col-8 {
		width: 25%;
	}

	.myNews {
		display: flex;
		font-size: 16px;
		height: auto;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
	}

	.interested,
	.friendship {
		background: none;
	}

	.home_public_content {
		padding: 42px 0;
	}

	.interested {
		height: 260px;
		/* #daf5fa */
		background-color: #ffffff;
	}

	.section {
		width: 1200px;
		margin: 0 auto;
	}

	.interested .interesnews ul {
		float: left;
		width: 48%;
		margin-right: 40px;
	}

	.interested .interesnews ul:last-child {
		margin-right: 0px;
	}

	.interested .interesnews ul {
		float: left;
		width: 48%;
		margin-right: 40px;
	}

	.interested .interesnews ul li {
		line-height: 30px;
	}

	ul,
	li,
	ol {
		list-style: none;
	}

	.interested .interesnews ul li a {
		font-size: 14px;
		color: #000000;
		padding-left: 20px;
		background: url('../../assets/pic/interesnewsicon.png') no-repeat left center;
		overflow: hidden;
		display: inline-block;
		width: 450px;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: top;
	}

	a,
	a:link {
		text-decoration: none;
	}

	a {
		cursor: pointer;
	}

	.friendLink {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		height: 250px;
		/* #daf5fa */
		background-color: #ffffff;
	}

	.bottom-ship {
		height: 128px;
		width: 1200px;
		margin-top: 20px;
		/* background: #ffffff; */
		margin-bottom: 20px;
	}

	.bottom-ship ul li {
		float: left;
		list-style: none;
		font-size: 14px;
		padding-left: 20px;
		padding-top: 10px;
	}
</style>
